<template>
  <el-col
    v-if="element.type === 'gridlist' || element.type === 'listview'"
    :md="24"
    :lg="24"
    class="widget-view"
    style="padding:0px"
    @click.native.stop="handleSelectWidget(index)"
    @dblclick.native.stop="handleBuildEvent(index)"
    :class="{
      active: selectWidget !== null && selectWidget.key === element.key
    }"
  >
    <template
      v-if="
        (element && element.type === 'gridlist') || element.type === 'listview'
      "
    >
      <div
        v-if="element && element.key"
        class="widget-grid-container data-grid widget-grid"
        :class="{
          active: selectWidget !== null && selectWidget.key === element.key
        }"
        :key="element.key"
        style="position: relative;min-height: 67px;"
        @click.stop="handleSelectWidget(index)"
      >
        <el-row
          type="flex"
          align="center"
          style="overflow-y:hidden;overflow-x:auto;min-height: 67px;"
        >
          <el-col
            v-if="
              element.options.enableChoose === 'true' ||
                element.options.enableChoose === true
            "
            class="detail-column"
            style="width:40px;line-height: 47px;"
          >
            <div class="label-name" style="padding:7px;">
              <!-- <input type="checkbox">   -->
              <el-checkbox
                v-if="
                  element.options.multy === 'true' ||
                    element.options.multy === true
                "
              ></el-checkbox>
              <el-radio else></el-radio>
            </div>
          </el-col>
          <el-col
            v-if="
              element.options.showNo === 'true' ||
                element.options.showNo === true
            "
            class="detail-column"
            style="width:80px;line-height: 47px;"
          >
            <div class="label-name">
              <span>序号</span>
            </div>
          </el-col>
          <draggable
            class="widget-form-list"
            style="border:1px solid #e8e8e8;min-height:67px;padding-bottom:0px;display: flex;min-width: 90%;overflow-x: auto;"
            v-model="element.options.columns"
            filter="widget-grid-container"
            v-bind="{
              group: { name: 'people1', pull: false },
              ghostClass: 'ghost',
              animation: 150
            }"
            @end="handleMoveEnd"
            @add="handleWidgetListViewColAdd($event, element, 1)"
            @start="handleWidgetListViewColStart($event, element, 1)"
            :disabled="element.type === 'gridlist'"
          >
            <el-col
              v-for="(col, colIndex) in element.options.columns"
              :key="colIndex"
              class="detail-column"
              :style="{
                width:
                  col.width === undefined ||
                  col.width === null ||
                  col.width === ''
                    ? 'auto'
                    : col.width + 'px'
              }"
              :lg="4"
              :class="{
                active: selectWidget !== null && selectWidget === col
              }"
              @dblclick.native.stop="handleBuildEvent(index, colIndex)"
            >
              <label
                class="label-name"
                @click.stop="handlelistSelectWidget(index, colIndex)"
                >{{ col.title }}
              </label>
              <div class="column-content">
                <WidgetDetailItem
                  @showcode="showcode"
                  v-if="col.type !== 'lable'"
                  :element="col"
                  :select.sync="selectWidget"
                ></WidgetDetailItem>
              </div>
              <el-button
                title="删除"
                style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
                @click.stop="
                  handleWidgetDeleteCel(element.options.columns, colIndex)
                "
                class="widget-action-delete"
                v-if="selectWidget !== null && selectWidget.key === col.key"
                circle
                plain
                type="danger"
              >
                <!-- <icon name="icon-trash" style="width: 12px;height: 12px;"></icon> -->
                <i class="el-icon-delete"></i>
              </el-button>
            </el-col>
          </draggable>
        </el-row>

        <el-button
          title="保存为常用控件"
          @click.stop="saveComControl(index)"
          v-if="selectWidget !== null && selectWidget.key === element.key"
          class="fa fa-save"
          style="position: absolute;right: 65px;bottom: -20px;z-index: 100;"
          circle
          plain
          type="danger"
        ></el-button>
        <el-button
          title="删除"
          style="bottom: -20px;"
          @click.stop="handleWidgetDelete(index)"
          class="widget-action-delete"
          v-if="selectWidget !== null && selectWidget.key === element.key"
          circle
          plain
          type="danger"
        >
          <!-- <icon name="icon-trash" style="width: 12px;height: 12px;"></icon> -->
          <i class="el-icon-delete"></i>
        </el-button>
      </div>
    </template>
  </el-col>
  <el-col
    v-else-if="rowcontrolstr.indexOf(element.type + ',') >= 0"
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-view"
    style="padding:0px"
    @click.native.stop="handleSelectWidget(index)"
    @dblclick.native.stop="handleBuildEvent(index)"
    :class="{
      active: selectWidget !== null && selectWidget.key === element.key
    }"
  >
    <el-row>
      <el-col
        class="border-content"
        :style="{
          'min-height':
            minheight.indexOf(element.type + ',') >= 0 ? '42px' : '42px',
          padding: '0px',
          height:
            dynamicheight.indexOf(element.type + ',') >= 0
              ? 'auto'
              : element.options.rowSpan !== undefined
              ? element.options.rowSpan * 42 + 'px'
              : '42px'
        }"
      >
        <template v-if="element.type === 'tree'">
          <el-tree
            :data="element.options.defaultValue"
            :props="element.options.defaultProps"
          ></el-tree>
        </template>
        <template v-else-if="element.type === 'navmenu'">
          <el-menu class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
              <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4">
              <a href="https://www.ele.me" target="_blank">订单管理</a>
            </el-menu-item>
          </el-menu>
        </template>
        <template v-else-if="element.type === 'partlayout'">
          <draggable
            class="widget-form-list"
            style="border:1px solid #e8e8e8"
            :style="{
              'padding-bottom': element.list.length === 0 ? '38px' : '0px'
            }"
            v-model="element.list"
            filter="widget-grid-container"
            v-bind="{
              group: 'people1',
              ghostClass: 'ghost',
              animation: 150
            }"
            @end="handleMoveEnd"
            @add="handleWidgetColAdd($event, element, 1)"
          >
            <WidgetFormItem
              v-for="(el, i) in element.list"
              :key="el.key"
              :element="el"
              :select.sync="selectWidget"
              :index="i"
              :data="element"
            ></WidgetFormItem>
          </draggable>
          <el-button
            title="拖拽"
            @click.stop="handleSelectWidget(index)"
            class="fa fa-arrows-alt"
            style="position: absolute;left: 0px;top: 0px;z-index: 100;    padding: 1px;"
            plain
            type="danger"
          ></el-button>
        </template>
        <template v-else-if="element.type === 'dynamiclayout'">
          <div v-if="element.options.dynamiclist.length > 0">
            <template v-if="element.options.layouttype === 'dynamic'">
              <WidgetFormItem
                v-for="(el, i) in element.options.dynamiclist[0].list"
                :key="el.key"
                :element="el"
                :select.sync="selectWidget"
                :index="i"
                :data="element"
              ></WidgetFormItem>
            </template>
            <div class="dynamicPlane">
              动态面板
            </div>
          </div>
        </template>
        <template v-else-if="element.type === 'calendar'">
          <el-calendar>
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template slot="dateCell" slot-scope="{ date, data }">
              <p :style="{ color: data.isSelected === true ? '#1989FA;' : '' }">
                {{
                  data.day
                    .split('-')
                    .slice(1)
                    .join('-')
                }}
                {{ data.isSelected ? '✔️' : '' }}
              </p>
            </template>
          </el-calendar>
        </template>
        <template v-else-if="element.type === 'imgage'">
          <img
            :src="element.options.defaultValue"
            :width="element.options.width"
            :height="element.options.height"
            :title="element.options.describe"
          />
        </template>

        <template v-else-if="element.type === 'upFilesComp'">
          <upfilescomp v-if="element.options.uptype === 'file'"></upfilescomp>
          <upmanyimgcomp
            v-else-if="element.options.uptype === 'img'"
          ></upmanyimgcomp>
          <upmanyimgcomp
            v-else-if="element.options.uptype === 'arryimg'"
          ></upmanyimgcomp>
        </template>
        <el-button
          title="删除"
          @click.stop="handleWidgetDelete(index)"
          v-if="selectWidget !== null && selectWidget.key === element.key"
          class="el-icon-delete"
          style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
          circle
          plain
          type="danger"
        ></el-button>
      </el-col>
    </el-row>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    @click.native.stop="handleSelectWidget(index)"
    v-else-if="element.type === 'barechart'"
  >
    <barechart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :axistype="element.options.axistype"
      :axisdata="element.options.axisdata"
      :tooltip="element.options.tooltip"
      :tooltip_left="element.options.tooltip_left"
      :bordermodel="element.options.bordermodel"
    ></barechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    @click.native.stop="handleSelectWidget(index)"
    v-else-if="element.type === 'funnelechart'"
  >
    <funnelechart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :tooltip="element.options.tooltip"
      :tooltip_left="element.options.tooltip_left"
      :bordermodel="element.options.bordermodel"
    ></funnelechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    @click.native.stop="handleSelectWidget(index)"
    v-else-if="element.type === 'gaugechart'"
  >
    <gaugechart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></gaugechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    @click.native.stop="handleSelectWidget(index)"
    v-else-if="element.type === 'linechart'"
  >
    <linechart
      :height="element.options.height"
      :title="element.title"
      :axistype="element.options.axistype"
      :axisdata="element.options.axisdata"
      :tooltip="element.options.tooltip"
      :tooltip_left="element.options.tooltip_left"
      :bordermodel="element.options.bordermodel"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
    ></linechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    @click.native.stop="handleSelectWidget(index)"
    v-else-if="element.type === 'piechart'"
  >
    <piechart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :tooltip="element.options.tooltip"
      :tooltip_left="element.options.tooltip_left"
      :bordermodel="element.options.bordermodel"
    ></piechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    @click.native.stop="handleSelectWidget(index)"
    v-else-if="element.type === 'radarechart'"
  >
    <radarechart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :tooltip="element.options.tooltip"
      :tooltip_left="element.options.tooltip_left"
      :bordermodel="element.options.bordermodel"
    ></radarechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'scatterechart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <scatterechart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :axistype="element.options.axistype"
      :axisdata="element.options.axisdata"
      :tooltip="element.options.tooltip"
      :tooltip_left="element.options.tooltip_left"
      :bordermodel="element.options.bordermodel"
    ></scatterechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'activeringchart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <activeringchart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></activeringchart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'waterlevelpondchart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <waterlevelpondchart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></waterlevelpondchart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'capsulechart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <capsulechart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></capsulechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'flylinechart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <flylinechart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></flylinechart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'conicalcolumnchart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <conicalcolumnchart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></conicalcolumnchart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'percentpondchart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <percentpondchart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></percentpondchart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'scrollboardchart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <scrollboardchart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></scrollboardchart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'scrollrankingboardchart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <scrollrankingboardchart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></scrollrankingboardchart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-chartview"
    v-else-if="element.type === 'digitalflopchart'"
    @click.native.stop="handleSelectWidget(index)"
  >
    <digitalflopchart
      :height="element.options.height"
      :title="element.title"
      :iconclass="element.options.iconclass"
      :iconcolor="element.options.iconcolor"
      :titlecolor="element.options.titlecolor"
      :decorationmodel="element.options.decorationmodel"
      :bordermodel="element.options.bordermodel"
    ></digitalflopchart>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-view "
    style="padding:0px"
    @click.native.stop="handleSelectWidget(index)"
    v-else-if="element.type === 'queryrelevance'"
  >
    <queryrelevance :title="element.title"></queryrelevance>
    <el-button
      title="复制"
      @click.stop="handleWidgetClone(index)"
      class="el-icon-circle-plus-outline"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    v-else-if="element.type === 'button'"
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    class="widget-view"
    style="border-right:none;border-top:none;padding:3px"
    @click.native.stop="handleSelectWidget(index)"
    :class="{
      active: selectWidget !== null && selectWidget.key === element.key
    }"
  >
    <div
      :style="{
        textAlign: element.options.align,
        lineHeight: '32px',
        color: '#999'
      }"
    >
      <template v-for="btn in element.options.buttons">
        <el-button
          style="padding: 9px;"
          :type="btn.options.butType"
          :key="btn.id"
          :size="btn.options.butsize"
          :icon="btn.options.icon"
          @click.stop="selectWidget = btn"
          :plain="btn.options.isplain"
          :round="btn.options.isround"
          :circle="btn.options.iscircle"
          :disabled="btn.options.disabled"
          @dblclick.native.stop="handleBuildBtnEvent(btn)"
        >
          {{ btn.options.labelTitle }}
        </el-button>
      </template>
    </div>
    <div
      :key="i"
      v-for="(ctrl, i) in element.list"
      style="text-align:center;"
    ></div>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      v-if="selectWidget !== null && selectWidget.key === element.key"
      class="el-icon-delete"
      style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
      circle
      plain
      type="danger"
    ></el-button>
  </el-col>
  <el-col
    :xs="element.options.xs"
    :md="element.options.md"
    :lg="getSpan"
    v-else
    class="widget-view "
    style="padding:0px"
    :class="{
      active: selectWidget !== null && selectWidget.key === element.key,
      is_req: element.options.required === true,
      'border-mult':
        element.type === 'textarea' ||
        element.type === 'htmlArea' ||
        element.type === 'editor'
    }"
    @dblclick.native.stop="handleBuildEvent(index)"
    @click.native.stop="handleSelectWidget(index)"
  >
    <el-row style="padding-left: 1px;">
      <el-col
        :lg="24"
        v-if="
          element.title !== '' &&
            fromInfo.designType === '/buildquestionnaire.html'
        "
        class="border-title"
        :class="{ required: element.options.required === true }"
        @dblclick.native.stop="handleBuildEvent(index)"
        @click.native.stop="handleSelectWidget(index)"
      >
        {{ element.title }}
      </el-col>
      <el-col
        :lg="24"
        class="border-content"
        :style="{
          height:
            element.options.rowSpan !== undefined
              ? 42 * element.options.rowSpan + 'px'
              : ''
        }"
      >
        <label
          class="labeltitle"
          :style="'width:' + element.options.labelwidth + 'px;'"
          v-if="
            element.title !== '' &&
              fromInfo.designType !== '/buildquestionnaire.html'
          "
          :class="{ required: element.options.required === true }"
        >
          {{ element.title }}
        </label>
        <div
          :style="
            element.title === '' ||
            fromInfo.designType === '/buildquestionnaire.html'
              ? ''
              : 'margin-left: ' + element.options.labelwidth + 'px;'
          "
        >
          <template v-if="element.type === 'fromlable'">
            <fromlable
              :filed="element.options.defaultValue"
              :titlecolor="element.options.titlecolor"
            ></fromlable>
          </template>
          <template v-if="element.type === 'hidden'">
            <fromlable :filed="element.options.defaultValue"></fromlable>
          </template>
          <template v-else-if="element.type === 'autonumber'">
            <autono
              :BusinessMoudle="element.options.BusinessMoudle"
              :BusinessModuleID="element.options.BusinessModuleID"
              :modelcode="element.options.modelcode"
            ></autono>
          </template>
          <template v-else-if="element.type === 'datarelevance'">
            <datarelevance
              :filedlist="element.options.filedList"
              :dataid="element.options.defaultValue"
              :apicode="element.options.sourceApi"
              :title="element.title"
            ></datarelevance>
          </template>
          <template v-else-if="element.type === 'cityselector'">
            <cityselector
              v-model="element.options.defaultValue"
              :disabled="element.options.disabled"
            ></cityselector>
          </template>
          <template v-else-if="element.type === 'input'">
            <el-input
              :placeholder="element.options.placeholder"
              v-model="element.options.defaultValue"
              :show-password="element.options.password"
              :clearable="element.options.clearable"
              :maxlength="element.options.dataLength"
              :prefix="element.options.prefix"
              :suffix="element.options.suffix"
              :suffix-icon="element.options.suffixicon"
              :prefix-icon="element.options.prefixicon"
              :disabled="element.options.disabled"
              :show-word-limit="element.options.showwordlimit"
              :size="element.options.butsize"
            ></el-input>
          </template>
          <template v-else-if="element.type === 'textarea'">
            <el-input
              type="textarea"
              :autosize="{
                minRows: element.options.minRows,
                maxRows: element.options.maxRows
              }"
              :maxlength="element.options.dataLength"
              :placeholder="element.options.placeholder"
              v-model="element.options.defaultValue"
              :show-word-limit="element.options.showwordlimit"
              :disabled="element.options.disabled"
              :clearable="element.options.clearable"
            >
            </el-input>
            <!-- <textarea
              :maxlength="element.options.dataLength"
              class="form-control multy_textarea"
              :placeholder="element.options.placeholder"
              :rows="element.options.rows"
              v-model="element.options.defaultValue"
            ></textarea> -->
          </template>
          <template v-else-if="element.type === 'switch'">
            <el-switch
              v-model="element.options.defaultValue"
              :active-color="element.options.activecolor"
              :inactive-color="element.options.inactivecolor"
              :disabled="element.options.disabled"
            >
            </el-switch>
          </template>
          <template v-else-if="element.type === 'slider'">
            <el-slider
              v-model="element.options.defaultValue"
              :range="element.options.range"
              :disabled="element.options.disabled"
              :max="element.options.max"
              :min="element.options.min"
              :step="element.options.step"
            >
            </el-slider>
          </template>
          <template v-else-if="element.type === 'colorpicker'">
            <el-color-picker
              v-model="element.options.defaultValue"
              :disabled="element.options.disabled"
              :size="element.options.butsize"
            >
            </el-color-picker>
          </template>
          <template v-else-if="element.type === 'avatar'">
            <el-avatar
              :size="element.options.butsize"
              :src="element.options.defaultValue"
              :disabled="element.options.disabled"
              :fit="element.options.fit"
              :shape="element.options.shape"
            ></el-avatar>
          </template>
          <template v-else-if="element.type === 'radio'">
            <el-radio-group
              v-model="element.options.defaultValue"
              size="mini"
              style="line-height:30px; "
            >
              <template v-if="element.options.isbutton !== true">
                <el-radio
                  style="inline"
                  :label="item.value"
                  v-for="(item, index) in element.options.options"
                  :key="item + index"
                  >{{ item }}</el-radio
                >
              </template>
              <template v-else>
                <el-radio-button
                  :label="item.value"
                  v-for="(item, index) in element.options.options"
                  :key="item + index"
                  >{{ item }}</el-radio-button
                >
              </template>
            </el-radio-group>
          </template>
          <template v-else-if="element.type === 'checkbox'">
            <el-checkbox-group
              v-model="element.options.defaultValue"
              size="mini"
              style="line-height:30px;"
            >
              <template v-if="element.options.isbutton !== true">
                <el-checkbox
                  style="inline"
                  :label="item.value"
                  v-for="(item, index) in element.options.options"
                  :key="item + index"
                  >{{ item }}</el-checkbox
                >
              </template>
              <template v-else>
                <el-checkbox-button
                  style="inline"
                  :label="item.value"
                  v-for="(item, index) in element.options.options"
                  :key="item + index"
                  >{{ item }}</el-checkbox-button
                >
              </template>
            </el-checkbox-group>
          </template>
          <template v-else-if="element.type === 'signname'">
            <signname :vheight="element.options.height" />
          </template>
          <template v-else-if="element.type === 'locationmap'">
            <locationmap :resultImg="element.options.defaultValue" />
          </template>
          <template v-else-if="element.type === 'time'">
            <el-time-picker
              v-model="element.options.defaultValue"
              :is-range="element.options.isRange"
              :placeholder="element.options.placeholder"
              :start-placeholder="element.options.startPlaceholder"
              :end-placeholder="element.options.endPlaceholder"
              :readonly="element.options.readonly"
              :disabled="element.options.disabled"
              :editable="element.options.editable"
              :clearable="element.options.clearable"
              :arrowControl="element.options.arrowControl"
              style="width: 100%;"
              size="element.options.butsize"
            ></el-time-picker>
          </template>
          <template v-else-if="element.type === 'date'">
            <template v-if="element.options.modeltype === 'date'">
              <el-date-picker
                v-model="element.options.defaultValue"
                :placeholder="element.options.placeholder"
                :format="element.options.format"
                :disabled="element.options.disabled"
                style="width: 100%;"
                value-format="yyyy-MM-dd"
                size="small"
              />
            </template>
            <template v-else-if="element.options.modeltype === 'year'">
              <el-date-picker
                v-model="element.options.defaultValue"
                type="year"
                format="yyyy"
                :placeholder="element.options.placeholder"
                :disabled="element.options.disabled"
                style="width: 100%;"
                size="small"
              >
              </el-date-picker>
            </template>
            <template v-else-if="element.options.modeltype === 'month'">
              <a-month-picker
                v-model="element.options.defaultValue"
                :placeholder="element.options.placeholder"
                format="yyyy-MM"
                :disabled="element.options.disabled"
                style="width: 100%;"
                size="small"
              />
            </template>
            <template v-else-if="element.options.modeltype === 'week'">
              <a-week-picker
                v-model="element.options.defaultValue"
                :placeholder="element.options.placeholder"
                :disabled="element.options.disabled"
                style="width: 100%;"
                size="small"
              />
            </template>
            <template v-else-if="element.options.modeltype === 'range'">
              <a-range-picker
                :show-time="{
                  hideDisabledOptions: element.options.isshowtime,
                  defaultValue: element.options.isshowtime
                    ? [
                        moment('00:00:00', 'HH:mm:ss'),
                        moment('11:59:59', 'HH:mm:ss')
                      ]
                    : []
                }"
                :format="element.options.format"
                style="width:100%"
                :disabled="element.options.disabled"
              />
            </template>
          </template>
          <template v-else-if="element.type === 'select'">
            <el-select
              v-model="element.options.defaultValue"
              :multiple="element.options.isMulty"
              :placeholder="element.options.placeholder"
              :size="element.options.butsize"
              :clearable="element.options.clearable"
              :filterable="element.options.isSearch"
              :collapse-tags="element.options.collapsetags"
              :allow-create="element.options.allowcreate"
              :default-first-option="element.options.allowcreate"
              style="width: 100%;"
            >
              <el-option
                v-for="item in element.options.options"
                :key="item"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="element.type === 'rate'">
            <el-rate
              v-model="element.options.defaultValue"
              :readonly="element.options.readonly"
              :disabled="element.options.disabled"
            ></el-rate>
          </template>
          <template v-else-if="element.type === 'inputnumber'">
            <div class="inputnumber">
              <el-input-number
                v-model="element.options.defaultValue"
                :disabled="element.options.disabled"
                :min="element.options.min"
                :max="element.options.max"
                :label="element.options.describe"
                :step="element.options.step"
                :precision="element.options.precision"
              ></el-input-number>
            </div>
          </template>
          <template v-else-if="element.type === 'timepicker'">
            <a-time-picker
              use12-hours
              :format="element.options.timeformat"
              :disabled="element.options.disabled"
              :minute-step="element.options.minute"
              :second-step="element.options.second"
              style="width: 100%;"
            />
          </template>
          <template
            v-else-if="
              element.type === 'user' ||
                element.type === 'organ' ||
                element.type === 'department' ||
                element.type === 'role'
            "
          >
            <selector
              :typemode="element.options.typemode"
              :ismulti="false"
            ></selector>
          </template>
          <template v-else-if="element.type === 'editor'">
            <Editor :value="element.options.defaultValue"></Editor>
          </template>

          <template v-else-if="element.type === 'hidden'"></template>
          <template v-else-if="element.type === 'blank'">
            <div
              style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;"
            >
              自定义区域
            </div>
          </template>
          <template v-else-if="element.type === 'htmlArea'">
            <htmlcode :htmlcode="element.options.htmlContent"></htmlcode>
          </template>
        </div>
        <el-button
          title="保存为常用控件"
          @click.stop="saveComControl(index)"
          v-if="selectWidget !== null && selectWidget.key === element.key"
          class="fa fa-save"
          style="position: absolute;right: 65px;bottom: -10px;z-index: 100;padding:5px;"
          circle
          plain
          type="danger"
        ></el-button>
        <el-button
          title="删除"
          @click.stop="handleWidgetDelete(index)"
          v-if="selectWidget !== null && selectWidget.key === element.key"
          class="el-icon-delete"
          style="position: absolute;right: 5px;bottom: -10px;z-index: 100;padding:5px;"
          circle
          plain
          type="danger"
        ></el-button>
        <el-button
          title="复制"
          @click.stop="handleWidgetClone(index)"
          class="el-icon-circle-plus-outline"
          v-if="selectWidget !== null && selectWidget.key === element.key"
          style="position: absolute;right: 35px;bottom: -10px;z-index: 100;padding:5px;"
          circle
          plain
          type="danger"
        ></el-button>
      </el-col>
    </el-row>
    <zhlDialog
      title="保存控件入库"
      ref="addcontroldialog"
      width="650px"
      class="my-dialog"
    >
      <addcontrol
        ref="addcontrol"
        :elementdata="selectWidget"
        @close="$refs.addcontroldialog.visible = false"
      ></addcontrol>
    </zhlDialog>
  </el-col>
</template>

<script>
/* eslint-disable */
import Draggable from 'vuedraggable'
import WidgetDetailItem from '@/components/formdesign/WidgetDetailItem'
import addcontrol from '@/components/formdesign/addcontrol.vue'
import htmlcode from '@/components/formdesign/html.vue'
import { cotorlEventConfig } from '@/components/formdesign/eventconfig.js'
import moment from 'moment'
export default {
  name: 'WidgetFormItem',
  props: ['element', 'select', 'index', 'data'],
  components: { Draggable, WidgetDetailItem, htmlcode, addcontrol },
  data() {
    return {
      selectWidget: this.select,
      clicktime: new Date(),
      rowcontrolstr:
        'tree,navmenu,blank,partlayout,dynamiclayout,calendar,imgage,upFilesComp,', ///占整行的控件
      dynamicheight: 'partlayout,tree,calendar,imgage,upFilesComp,', ///由内部控件撑高度的控件
      minheight: 'partlayout,dynamiclayout,',
      fromInfo: this.changeFromInfo()
    }
  },
  mounted() {},
  created() {},
  methods: {
    moment,
    handleMoveEnd({ newIndex, oldIndex }) {
      console.log('index', newIndex, oldIndex)
    },
    handleWidgetListViewColStart() {
      return false
    },
    handleWidgetListViewColAdd($event, row, colIndex) {
      const newIndex = $event.newIndex
      const list = row.options.columns
      if (
        list[newIndex].dragType !== 'control' ||
        list[newIndex].type === 'autonumber'
      ) {
        list.splice(newIndex, 1)
        return
      }
      const key =
        Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      let contrloptions = JSON.parse(JSON.stringify(list[newIndex].options))
      this.$set(list, newIndex, {
        ...list[newIndex],
        options: {
          ...Object.assign({}, contrloptions)
        },
        key,
        model: list[newIndex].type + '_' + key,
        rules: [],
        dataIndex: 'filed' + key,
        width: '120',
        gridid: row.options.controlId,
        isScopedSlots: true
      })
      // console.log('newItem', row.list[newIndex].type)
      // console.log('this.data.list', this.data.list[newIndex])
      const labelId =
        Date.parse(new Date()) / 1000 + '' + Math.ceil(Math.random() * 99999)
      const ctrlId =
        Date.parse(new Date()) / 1000 + '' + Math.ceil(Math.random() * 99999)
      // console.log(labelId + '_' + ctrlId)
      if (list[newIndex].options.labelId !== undefined) {
        this.$set(
          list[newIndex].options,
          'labelId',
          list[newIndex].options.labelId + labelId
        )
      }
      if (
        list[newIndex].options.labelSpan !== undefined &&
        list[newIndex].options.labelSpan === '2' &&
        list[newIndex].options.ctrlSpan === '2'
      ) {
        const containerwidthstr = window.getComputedStyle($event.srcElement)
          .width
        const containerwidth = parseInt(containerwidthstr.replace('px', ''))
        if (containerwidth < 400) {
          list[newIndex].options.labelSpan = '6'
          list[newIndex].options.ctrlSpan = '6'
        }
        if (
          (400 < containerwidth && containerwidth < 700) ||
          containerwidth === 400
        ) {
          list[newIndex].options.labelSpan = '2'
          list[newIndex].options.ctrlSpan = '4'
        }
      }
      if (list[newIndex].options.filed !== undefined) {
        this.$set(list[newIndex].options, 'filed', 'filed' + ctrlId)
      }
      if (list[newIndex].options.controlId !== undefined) {
        this.$set(
          list[newIndex].options,
          'controlId',
          list[newIndex].options.controlId + ctrlId
        )
      }
      if (list[newIndex].options.sourceApiId !== undefined) {
        this.$set(list[newIndex].options, 'sourceApiId', 'fun' + ctrlId)
      }
      if (
        list[newIndex].type === 'radio' ||
        list[newIndex].type === 'checkbox' ||
        list[newIndex].type === 'select' ||
        (this.data.list[newIndex] && this.data.list[newIndex].type === 'select')
      ) {
        // this.$set(row.list, newIndex, {
        //   ...row.list[newIndex],
        //   options: {
        //     ...row.list[newIndex].options,
        //     options: row.list[newIndex].options.options.map(item => ({
        //       ...item
        //     }))
        //   }
        // })
      } else if (list[newIndex].type === 'button') {
        // console.log('before', row.list)
        this.$set(list, newIndex, {
          ...list[newIndex],
          key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999),
          options: {
            ...list[newIndex].options
          }
        })
        // console.log('after', this.data.list[newIndex])
      }
      this.selectWidget = list[newIndex]
    },
    handleWidgetColAdd($event, row, colIndex) {
      const newIndex = $event.newIndex
      const oldIndex = $event.oldIndex
      const item = $event.item
      if (item.className.indexOf('data-grid') >= 0) {
        item.tagName === 'DIV' &&
          this.data.list.splice(oldIndex, 0, row.list[newIndex])

        row.list.splice(newIndex, 1)

        return false
      }

      // console.log('from', item)

      const key =
        Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      const contrloptions = JSON.parse(
        JSON.stringify(row.list[newIndex].options)
      )
      this.$set(row.list, newIndex, {
        ...row.list[newIndex],
        options: {
          ...Object.assign({}, contrloptions)
        },
        key,
        model: row.list[newIndex].type + '_' + key,
        rules: []
      })
      // console.log('newItem', row.list[newIndex].type)
      // console.log('this.data.list', this.data.list[newIndex])
      const labelId =
        Date.parse(new Date()) / 1000 + '' + Math.ceil(Math.random() * 99999)
      const ctrlId =
        Date.parse(new Date()) / 1000 + '' + Math.ceil(Math.random() * 99999)
      // console.log(labelId + '_' + ctrlId)
      if (row.list[newIndex].options.labelId !== undefined) {
        this.$set(
          row.list[newIndex].options,
          'labelId',
          row.list[newIndex].options.labelId + labelId
        )
      }
      if (
        row.list[newIndex].options.labelSpan !== undefined &&
        row.list[newIndex].options.labelSpan === '2' &&
        row.list[newIndex].options.ctrlSpan === '2'
      ) {
        const containerwidthstr = window.getComputedStyle($event.srcElement)
          .width
        const containerwidth = parseInt(containerwidthstr.replace('px', ''))
        if (containerwidth < 400) {
          row.list[newIndex].options.labelSpan = '6'
          row.list[newIndex].options.ctrlSpan = '6'
        }
        if (
          (400 < containerwidth && containerwidth < 700) ||
          containerwidth === 400
        ) {
          row.list[newIndex].options.labelSpan = '2'
          row.list[newIndex].options.ctrlSpan = '4'
        }
      }
      if (row.list[newIndex].options.filed !== undefined) {
        this.$set(row.list[newIndex].options, 'filed', 'filed' + ctrlId)
      }
      if (row.list[newIndex].options.controlId !== undefined) {
        this.$set(
          row.list[newIndex].options,
          'controlId',
          row.list[newIndex].options.controlId + ctrlId
        )
      }
      if (row.list[newIndex].options.sourceApiId !== undefined) {
        this.$set(row.list[newIndex].options, 'sourceApiId', 'fun' + ctrlId)
      }
      if (row.list[newIndex].type === 'autonumber') {
        this.$set(
          row.list[newIndex].options,
          'BusinessModuleID',
          row.list[newIndex].options.controlId + ctrlId
        )
      } else if (row.list[newIndex].type === 'button') {
        // console.log('before', row.list)
        this.$set(row.list, newIndex, {
          ...row.list[newIndex],
          key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999),
          options: {
            ...row.list[newIndex].options
          }
        })
        // console.log('after', this.data.list[newIndex])
      }
      this.selectWidget = row.list[newIndex]
      // console.log('handleWidgetColAdd end', row.list[newIndex].type)
    },
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index]
    },
    handleBuildEvent(index, colIndex) {
      const cotorlEnent = this.data.list[index]
      if (colIndex !== undefined)
        cotorlEnent = cotorlEnent.options.columns[colIndex]
      this.handleBuildBtnEvent(cotorlEnent)
    },
    handleBuildBtnEvent(cotorlEnent) {
      if (cotorlEnent.eventlist === undefined) {
        cotorlEnent.eventlist = []
      }
      if (cotorlEventConfig[cotorlEnent.type] !== undefined) {
        const controleventlist = cotorlEventConfig[cotorlEnent.type]
        if (controleventlist.length > 0) {
          const eventlist = cotorlEnent.eventlist.filter(item => {
            return item.label === controleventlist[0].label
          })
          if (eventlist === undefined || eventlist.length === 0) {
            cotorlEnent.eventlist.push({
              label: controleventlist[0].label,
              value: controleventlist[0].getfunction(cotorlEnent),
              content: controleventlist[0].content
            })
            this.$emit('showcode', controleventlist[0].getfunction(cotorlEnent))
          }
          if (eventlist.length > 0) {
            this.$emit('showcode', eventlist[0].value)
          }
        }
      }
    },
    saveComControl(index) {
      this.$refs.addcontroldialog.visible = true
    },
    showcode(funname) {
      this.$emit('showcode', funname)
    },
    handleWidgetDeleteCel(cels, index) {
      if (cels.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {}
        } else {
          this.selectWidget = cels[index - 1]
        }
      } else {
        this.selectWidget = cels[index + 1]
      }
      this.$nextTick(() => {
        cels.splice(index, 1)
      })
    },
    handleWidgetDelete(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {}
        } else {
          this.selectWidget = this.data.list[index - 1]
        }
      } else {
        this.selectWidget = this.data.list[index + 1]
      }
      this.$nextTick(() => {
        this.data.list.splice(index, 1)
      })
    },
    handlelistSelectWidget(index, colIndex) {
      this.selectWidget = this.data.list[index].options.columns[colIndex]
      // this.activeControlPanel = 'fieldProperty'
    },
    handleDetailSelectWidget(index, colIndex) {
      this.selectWidget = this.data.list[index].options.columns[colIndex]
      // this.activeControlPanel = 'fieldProperty'
    },
    handleWidgetClone(index) {
      let cloneData = {
        ...this.data.list[index],
        options: { ...this.data.list[index].options },
        key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      }

      const labelId =
        Date.parse(new Date()) / 1000 + '' + Math.ceil(Math.random() * 99999)
      const ctrlId =
        Date.parse(new Date()) / 1000 + '' + Math.ceil(Math.random() * 99999)
      // console.log(labelId + '_' + ctrlId)
      if (cloneData.options.labelId !== undefined) {
        cloneData.options.labelId = labelId
      }

      if (cloneData.options.controlId !== undefined) {
        cloneData.options.controlId = ctrlId
      }

      if (
        this.data.list[index].type === 'radio' ||
        this.data.list[index].type === 'checkbox'
      ) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map(item => ({ ...item }))
          }
        }
      }
      cloneData.options.filed = 'filed' + ctrlId
      this.data.list.splice(index, 0, cloneData)

      this.$nextTick(() => {
        this.selectWidget = this.data.list[index + 1]
      })
    },
    editpartlayout(docelement) {
      const date1 = new Date()
      const date3 = date1.getTime() - this.clicktime.getTime()
      // console.log(date3)
      if (date3 <= 800) {
        this.$emit('editpartlayout', docelement)
      } else {
        this.selectWidget = docelement
      }
      this.clicktime = date1
    },
    editpartlayout1(docelement) {
      this.$emit('editpartlayout', docelement)
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    },
    SetChangeFromInfo(val) {
      this.fromInfo = val
    }
  },
  computed: {
    getSpan() {
      switch (this.fromInfo.deviceDesignType) {
        case 'pc':
          return this.element.options.lg
          break
        case 'pad':
          return this.element.options.md
          break
        case 'mobile':
          return this.element.options.xs
          break
        default:
          return this.element.options.lg
          break
      }
    },
    ctrlSpan() {
      let span = parseInt(
        this.element.options.span === undefined ? 2 : this.element.options.span
      )
      if (span === 1) {
        span = 2
      }
      return span * 2
    },
    multiple() {
      if (this.element.options) {
        return eval(this.element.options.isMulty)
      }
      return false
    },
    SetChangeFromInfo() {
      return this.changeFromInfo()
    }
  },
  inject: ['changeFromInfo']
}
</script>

<style lang="less" scoped>
.widget-form-container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .widget-form-list {
    height: 100%;
    padding-bottom: 50px;
    clear: both;
    overflow: hidden;
    // border: 2px dashed rgb(238, 238, 238);
    .widget-view {
      padding: 5px 10px 18px;
      margin: 0;
      position: relative;
      border: none;
      min-height: 40px;
      // border-left: 5px solid transparent;
      // height:44px;
      &.is_req {
        .el-form-item__label::before {
          content: '*';
          color: #f56c6c;
          margin-right: 4px;
        }
      }

      &:after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;
        z-index: 1001;
      }

      &:hover {
        background: #ecf5ff;
      }

      &.active {
        background: #d3e2f1 !important;
        div {
          background: #d3e2f1 !important;
        }

        span {
          background: #d3e2f1 !important;
        }
      }
    }

    .widget-action-delete {
      position: absolute;
      right: 20px;
      bottom: -35px;
      z-index: 1009;
    }

    .widget-action-clone {
      position: absolute;
      right: 70px;
      bottom: -35px;
      z-index: 1009;
    }
  }

  .widget-grid {
    //background: #F4F6FC;
    position: relative;
    border-left: 0px solid transparent;
    // padding: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
    /*border-top: 1px solid #ccc;*/
    border-left: 1px solid #ccc;

    &.active {
      background: #d3e2f1 !important;

      div {
        background: #d3e2f1 !important;
      }

      span {
        background: #d3e2f1 !important;
      }

      button {
        background: #d3e2f1 !important;
      }

      label {
        background: #d3e2f1 !important;
      }
    }
  }

  .widget-grid-container {
    &.ghost {
      &::after {
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;
        z-index: 10;
        content: '';
      }
    }
  }

  input {
    height: 32px;
  }

  .ghost {
    background: #fff;
    border: 1px dashed #409eff;
    float: left;
    height: 32px;
    box-sizing: border-box;

    &::after {
      background: #fff;
    }
  }

  .ghostpanel {
    background: #fff;
    border: 1px dashed #409eff;
    height: 100%;
    box-sizing: border-box;

    &::after {
      background: #fff;
    }
  }

  li.ghostpanel {
    height: 30px;
    list-style: none;
    font-size: 0;
  }

  li.ghost {
    height: 30px;
    list-style: none;
    font-size: 0;
  }
}
</style>
<style scoped>
.border-content >>> .el-checkbox {
  margin-right: 0px;
}
.widget-chartview {
  position: relative;
}
.hiddenoverflow {
  overflow: hidden;
}

.ant-tabs-tabpane {
  border-bottom: 1px solid #ccc;
}
.ant-tabs-bar {
  margin-bottom: 5px;
}
.el-radio-group {
  line-height: 32px;
}
.form-control,
.single-line {
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 1px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 12px;
}

.required:before {
  content: '*';
  color: #c80000;
  font-size: 12px;
  vertical-align: top;
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 2px;
  margin-left: -9px;
}
.label-name.required:before {
  top: auto;
  margin-top: 2px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
  background-color: #fff;
  background-image: none;
  color: inherit;
  display: block;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  -webkit-transition: border-color 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s,
    -webkit-box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 12px;
  border-radius: 0;
}
.el-input__suffix {
  right: 0px;
  line-height: 32px;
}

.el-switch__label * {
  font-size: 12px;
}
.border-title {
  line-height: 42px;
  padding-left: 15px;
  border-top: none;
  border-right: none;
}

.border-content {
  border-top: none;
  border-right: none;
  padding: 1px 15px;
}

.border-mult .border-content {
  height: auto;
  border-bottom: none;
}

.border-mult {
  background-color: #f5f5f5;
}

.border-mult .border-title {
  height: auto;
  border-bottom: none;
  border-left: none;
  margin-left: -2px;
}
.labeltitle {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 30px;
  /* padding: 0 12px 0 0; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: normal;
}
</style>
<style scoped>
.detail-title {
  width: 100%;
  padding-left: 8px;
  height: 35px;
  line-height: 35px;
  background-color: #eaeaea;
  padding-right: 10px;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.nav-tabs-link .fa-caret-square-o-right {
  font-size: 14px;
  color: #990000;
}
span.form_info {
  padding-left: 2px;
  font-weight: 600;
  color: #990000;
}
.nav-tabs-link a.arrow_telescopic.shrink {
  background-size: 16px 16px;
}
.nav-tabs-link a.arrow_telescopic {
  float: right;
  display: block;
  width: 34px;
  height: 34px;
}
.label-name {
  white-space: nowrap;
  line-height: 0;
  margin: 0;
  padding: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid transparent;
  display: block;
  cursor: pointer;
  text-align: center;
  margin-right: 1px;
  height: 31px;
}

.label-name .el-radio {
  line-height: 1;
}
.column-content {
  text-align: center;
  line-height: 42px;
  width: 100%;
  margin-bottom: 5px;
}
.detail-column {
  padding: 0;
  min-height: 60px;
  float: left;
  border-bottom: 1px solid transparent;
  border-right: 1px solid #ccc;
  border-left: none;
  position: relative;
}

.detail-column.active {
  background: #d3e2f1 !important;
}
.detail-column.active .label-name {
  background: #d3e2f1 !important;
}
.el-row.el-row--flex {
  border-top: 1px solid #ccc;
}

.layermend {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  font-weight: 400;
  background: 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  outline: none;
}
.layermend::after,
.layermend::before {
  position: absolute;
  right: 5px;
  top: 14px;
  content: '';
  width: 15px;
  height: 2px;
  background-color: red;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-radius: 3px;
}
.layermend::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.el-card .el-card__body {
  padding: 0px;
  height: 400px;
  overflow-y: auto;
}
.dynamicPlane {
  position: absolute;
  background: hsla(0, 0%, 48.2%, 0.2) !important;
  color: red;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.widget-form-list >>> .el-input-number {
  width: 100% !important;
}
.inputnumber >>> .el-input-number__increase {
  height: 38px;
}
.inputnumber >>> .el-input-number__decrease {
  height: 38px;
}
.inputnumber >>> .el-input__inner {
  height: 38px;
  line-height: 38px;
}
</style>
